<template>
    <div>
        <input type="text" v-model="value" />
        <A v-move="{background: value }"></A>
    </div>
</template>

<script setup lang="ts">
import {ref, Directive, DirectiveBinding} from 'vue'
import A from './A.vue'
// 自定义指令
let value = ref<string>('')
// 指令命名必须以 vNameOfDirective 的形式， 才可以直接在模板上使用
type Dir = {
    background: string,
    flag: boolean
}
// 指令的函数简写： 只会触发mounted和updated的周期
let vMove: Directive = (el: HTMLElement, binding: DirectiveBinding<Dir>) => {
    el.style.background = binding.value.background
}
</script>

<style scoped>

</style>